<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>队员详情 - 排球队</title>
    <link rel="stylesheet" href="../../../css/style.css">
    <style>
        .player-detail-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        .back-button {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 8px;
            margin-bottom: 30px;
            transition: background 0.3s ease;
        }
        
        .back-button:hover {
            background: #5a6fd8;
        }
        
        .player-header {
            background: white;
            border-radius: 15px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            align-items: center;
        }
        
        .player-avatar {
            text-align: center;
        }
        
        .avatar-image {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 4rem;
            margin: 0 auto 20px;
        }
        
        .player-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .player-info h1 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 15px;
        }
        
        .player-position {
            background: #f0f0f0;
            color: #666;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 1rem;
            display: inline-block;
            margin-bottom: 20px;
        }
        
        .player-basic-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
        }
        
        .info-label {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-weight: bold;
            color: #333;
        }
        
        .content-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }
        
        .achievements-list {
            list-style: none;
            padding: 0;
        }
        
        .achievement-item {
            background: #f8f9fa;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        .achievement-year {
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .achievement-title {
            color: #333;
            margin-bottom: 5px;
        }
        
        .achievement-description {
            color: #666;
            font-size: 0.9rem;
        }
        
        .matches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .match-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #667eea;
        }
        
        .match-date {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .match-teams {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .match-result {
            color: #667eea;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .match-stats {
            font-size: 0.9rem;
            color: #666;
        }
        
        .personal-info {
            line-height: 1.8;
            color: #555;
        }
        
        .skills-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        
        .skill-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        
        .skill-name {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        .skill-rating {
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        
        .star {
            color: #ffd700;
            font-size: 1.2rem;
        }
        
        .star.empty {
            color: #ddd;
        }
    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h2>排球队管理系统</h2>
                </div>
                <ul class="nav-menu">
                    <li><a href="../index/index.html">首页</a></li>
                    <li><a href="../about/about.html">球队介绍</a></li>
                    <li><a href="list.html" class="active">队员信息</a></li>
                    <li><a href="../matches/matches.html">比赛管理</a></li>
                    <li><a href="../training/training.html">训练安排</a></li>
                    <li><a href="../knowledge/index.html">排球知识</a></li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <div class="player-detail-container">
            <a href="list.html" class="back-button">← 返回队员列表</a>
            
            <!-- 队员基本信息 -->
            <div class="player-header" id="playerHeader">
                <!-- 内容将通过JavaScript动态生成 -->
            </div>

            <!-- 技术统计 -->
            <div class="content-section">
                <h2 class="section-title">技术统计</h2>
                <div class="stats-grid" id="statsGrid">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 个人简介 -->
            <div class="content-section">
                <h2 class="section-title">个人简介</h2>
                <div class="personal-info" id="personalInfo">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 技术特点 -->
            <div class="content-section">
                <h2 class="section-title">技术特点</h2>
                <div class="skills-list" id="skillsList">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 比赛记录 -->
            <div class="content-section">
                <h2 class="section-title">近期比赛记录</h2>
                <div class="matches-grid" id="matchesGrid">
                    <!-- 内容将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 荣誉成就 -->
            <div class="content-section">
                <h2 class="section-title">荣誉成就</h2>
                <ul class="achievements-list" id="achievementsList">
                    <!-- 内容将通过JavaScript动态生成 -->
                </ul>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <p>&copy; 2024 排球队管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // 队员详细数据
        const playerDetails = {
            1: {
                name: "王队长",
                number: "1",
                position: "主攻手",
                grade: "高三",
                height: "185cm",
                weight: "75kg",
                age: 18,
                experience: "3年",
                image: "👨‍🦱",
                attackRate: "65%",
                serveRate: "78%",
                blockRate: "45%",
                receiveRate: "70%",
                personalInfo: "王队长是球队的核心球员，拥有出色的领导能力和技术实力。他在场上总是能够激励队友，带领球队取得胜利。作为主攻手，他的扣球技术精湛，力量十足，是球队的主要得分手。",
                skills: [
                    { name: "扣球技术", rating: 5 },
                    { name: "发球技术", rating: 4 },
                    { name: "拦网技术", rating: 3 },
                    { name: "一传技术", rating: 4 },
                    { name: "团队配合", rating: 5 },
                    { name: "心理素质", rating: 5 }
                ],
                matches: [
                    {
                        date: "2024年1月15日",
                        teams: "我们 vs 市一中",
                        result: "3:1 胜利",
                        stats: "扣球得分: 18分, 发球得分: 3分, 拦网得分: 2分"
                    },
                    {
                        date: "2024年1月10日",
                        teams: "我们 vs 市二中",
                        result: "3:0 胜利",
                        stats: "扣球得分: 15分, 发球得分: 2分, 拦网得分: 1分"
                    },
                    {
                        date: "2024年1月5日",
                        teams: "我们 vs 市三中",
                        result: "2:3 失败",
                        stats: "扣球得分: 12分, 发球得分: 1分, 拦网得分: 0分"
                    }
                ],
                achievements: [
                    {
                        year: "2023年",
                        title: "市级联赛最佳主攻手",
                        description: "在市级中学生排球联赛中获得最佳主攻手称号"
                    },
                    {
                        year: "2022年",
                        title: "省级比赛第三名",
                        description: "代表学校参加省级比赛获得第三名"
                    },
                    {
                        year: "2021年",
                        title: "校级优秀运动员",
                        description: "获得学校年度优秀运动员称号"
                    }
                ]
            }
        };

        // 获取URL参数中的队员ID
        function getPlayerId() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('id') || 1;
        }

        // 渲染队员头像和基本信息
        function renderPlayerHeader(player) {
            const header = document.getElementById('playerHeader');
            header.innerHTML = `
                <div class="player-avatar">
                    <div class="avatar-image">${player.image}</div>
                    <div class="player-number">#${player.number}</div>
                </div>
                <div class="player-info">
                    <h1>${player.name}</h1>
                    <div class="player-position">${player.position}</div>
                    <div class="player-basic-info">
                        <div class="info-item">
                            <span class="info-label">年级</span>
                            <span class="info-value">${player.grade}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">身高</span>
                            <span class="info-value">${player.height}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">体重</span>
                            <span class="info-value">${player.weight}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">年龄</span>
                            <span class="info-value">${player.age}岁</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">球龄</span>
                            <span class="info-value">${player.experience}</span>
                        </div>
                    </div>
                </div>
            `;
        }

        // 渲染技术统计
        function renderStats(player) {
            const statsGrid = document.getElementById('statsGrid');
            statsGrid.innerHTML = `
                <div class="stat-card">
                    <div class="stat-value">${player.attackRate}</div>
                    <div class="stat-label">扣球成功率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">${player.serveRate}</div>
                    <div class="stat-label">发球成功率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">${player.blockRate}</div>
                    <div class="stat-label">拦网成功率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">${player.receiveRate}</div>
                    <div class="stat-label">一传成功率</div>
                </div>
            `;
        }

        // 渲染个人简介
        function renderPersonalInfo(player) {
            const personalInfo = document.getElementById('personalInfo');
            personalInfo.innerHTML = `<p>${player.personalInfo}</p>`;
        }

        // 渲染技术特点
        function renderSkills(player) {
            const skillsList = document.getElementById('skillsList');
            skillsList.innerHTML = player.skills.map(skill => `
                <div class="skill-item">
                    <div class="skill-name">${skill.name}</div>
                    <div class="skill-rating">
                        ${Array.from({length: 5}, (_, i) => 
                            `<span class="star ${i < skill.rating ? '' : 'empty'}">★</span>`
                        ).join('')}
                    </div>
                </div>
            `).join('');
        }

        // 渲染比赛记录
        function renderMatches(player) {
            const matchesGrid = document.getElementById('matchesGrid');
            matchesGrid.innerHTML = player.matches.map(match => `
                <div class="match-card">
                    <div class="match-date">${match.date}</div>
                    <div class="match-teams">${match.teams}</div>
                    <div class="match-result">${match.result}</div>
                    <div class="match-stats">${match.stats}</div>
                </div>
            `).join('');
        }

        // 渲染荣誉成就
        function renderAchievements(player) {
            const achievementsList = document.getElementById('achievementsList');
            achievementsList.innerHTML = player.achievements.map(achievement => `
                <li class="achievement-item">
                    <div class="achievement-year">${achievement.year}</div>
                    <div class="achievement-title">${achievement.title}</div>
                    <div class="achievement-description">${achievement.description}</div>
                </li>
            `).join('');
        }

        // 初始化页面
        function initPage() {
            const playerId = getPlayerId();
            const player = playerDetails[playerId];
            
            if (player) {
                renderPlayerHeader(player);
                renderStats(player);
                renderPersonalInfo(player);
                renderSkills(player);
                renderMatches(player);
                renderAchievements(player);
            } else {
                alert('未找到队员信息');
                window.location.href = 'list.html';
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html> 